<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!--    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">-->
    <meta name="description" content="">
    <meta name="author" content="">

    <title>城市道路渠化信息服务系统</title>
    <!-- Bootstrap core CSS -->
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link th:href="@{/css/dashboard.css}" rel="stylesheet">
    <!--    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>-->
    <!--    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>-->

    <style type="text/css">
        /* Chart.js */
        /*导航栏居中*/
        /*解决闪烁*/
        .box{
            visibility: hidden;
        }
        /*文字居中*/
        th,td{
            text-align: center;
        }
        /*添加表格边框*/
        .f1{
            border: 1px solid #dee2e6;
        }
        .f2{
            border: 1px solid #dee2e6;
        }
        .f3{
            border: 1px solid #dee2e6;
        }

        /*导航栏居中*/
        .my-form {
            flex-flow: inherit;
        }
        .table td {
            vertical-align: inherit;
        }

        /*.liActive {*/
        /*    background-color: red !important;*/
        /*}*/


        /*分页放中间*/
        .pagination {
            padding-left: 50%;
            margin-left: -200px;
            width: 200px;
        }

        @-webkit-keyframes chartjs-render-animation {
            from {
                opacity: 0.99
            }
            to {
                opacity: 1
            }
        }

        @keyframes chartjs-render-animation {
            from {
                opacity: 0.99
            }
            to {
                opacity: 1
            }
        }

        .chartjs-render-monitor {
            -webkit-animation: chartjs-render-animation 0.001s;
            animation: chartjs-render-animation 0.001s;
        }

        /*a{*/

        /*	transition: all 0.5s;*/
        /*}*/
        /*a:hover {*/
        /*	color: #fff;*/
        /*	text-decoration: none;*/
        /*	border-radius: 5px;*/
        /*	background-color: #03e9f4;*/
        /*	box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4, 0 0 100px #03e9f4;*/
        /*}*/
    </style>
</head>

<body>

<!--提示框-->
<div onclick="this.remove()" style="width: 300px;position: absolute;left: 500px;top: 60px;z-index: 99;
            background-color: rgba(0, 0, 0, 0.3);color: red;
            box-shadow: 0 15px 25px rgba(0, 0, 0, 0.3);" th:if="${not #strings.isEmpty(msg)}" class="alert alert-warning alert-dismissible fade show" role="alert">
    <strong th:text="${msg}"></strong>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>

<div class="box">


    <nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0">
        <div style="display: flex;width: 300px">

            <a class="navbar-brand col-sm-3 col-md-2 mr-0" th:href="@{/uav/user/index}" style="padding-right: 241px;">
                城市道路渠化信息服务系统
            </a>
            <!--			<input class="col-sm-3 mr-0 form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">-->
            <!--			<button type="button" class="btn btn-dark">查询</button>-->
            <!--			<form class="form-control" action="/hello">-->
            <!--			<input class="form-control form-control-dark w-25" type="text" placeholder="Search">-->
            <!--			<button type="submit" class="btn btn-dark">查询</button>-->
<!--            查询-->
            <form class="form-inline my-form" th:action="@{/uav/user/manger?id=2}">
                <input name="username" class="form-control form-control-dark  " type="search" placeholder="Search"
                       aria-label="Search" style="width: 500px !important">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit" style="margin-left: 10px">Search</button>
            </form>
            <!--			</form>-->
        </div>

        <ul class="navbar-nav px-3">
            <li class="nav-item text-nowrap">
                <a class="nav-link" th:href="@{/uav/logout}">Sign out</a>
            </li>
        </ul>
    </nav>

    <!--		退出标签-->
    <div class="container-fluid">
        <div class="row">
            <nav class="col-md-2 d-none d-md-block bg-light sidebar">
                <div class="sidebar-sticky">
                    <ul class="nav flex-column">

                        <li class="nav-item" style="margin-top: 5px;margin-left: 20px">
                            <a class="nav-link" th:href="@{/uav/user/index?id=0}">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
                                     fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                     stroke-linejoin="round" class="feather feather-home">
                                    <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                                    <polyline points="9 22 9 12 15 12 15 22"></polyline>
                                </svg>
                                路段信息 <span class="sr-only">(current)</span>
                            </a>
                        </li>
                        <li class="nav-item" style="margin-top: 10px;margin-left: 20px">
                            <a class="nav-link" th:href="@{/uav/user/manger?id=1}">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-lines-fill" viewBox="0 0 16 16">
                                    <path d="M6 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-5 6s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H1zM11 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5zm.5 2.5a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1h-4zm2 3a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1h-2zm0 3a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1h-2z"/>
                                </svg>
                                &nbsp;用户管理
                                <span class="sr-only">(current)</span>
                            </a>
                        </li>
                        <li class="nav-item" style="margin-top: 10px;margin-left: 20px">
                            <a class="nav-link" th:href="@{/uav/user/system?id=2}">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-signpost-2" viewBox="0 0 16 16">
                                    <path d="M7 1.414V2H2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h5v1H2.5a1 1 0 0 0-.8.4L.725 8.7a.5.5 0 0 0 0 .6l.975 1.3a1 1 0 0 0 .8.4H7v5h2v-5h5a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1H9V6h4.5a1 1 0 0 0 .8-.4l.975-1.3a.5.5 0 0 0 0-.6L14.3 2.4a1 1 0 0 0-.8-.4H9v-.586a1 1 0 0 0-2 0zM13.5 3l.75 1-.75 1H2V3h11.5zm.5 5v2H2.5l-.75-1 .75-1H14z"/>
                                </svg>
                                &nbsp;道路管理
                                <span class="sr-only">(current)</span>
                            </a>
                        </li>
                        <!--                    <li class="nav-item">-->
                        <!--                        <a class="nav-link" href="#">-->
                        <!--                            Orders <span class="sr-only">(current)</span>-->
                        <!--                        </a>-->
                        <!--                    </li>-->
                        <!--                    <li class="nav-item">-->
                        <!--                        <a class="nav-link" href="#">-->
                        <!--                            Products-->
                        <!--                        </a>-->
                        <!--                    </li>-->
                        <!--                    <li class="nav-item">-->
                        <!--                        <a class="nav-link" href="#">-->
                        <!--                            Customers-->
                        <!--                        </a>-->
                        <!--                    </li>-->
                        <!--                    <li class="nav-item">-->
                        <!--                        <a class="nav-link" href="#">-->
                        <!--                            Reports-->
                        <!--                        </a>-->
                        <!--                    </li>-->
                        <!--                    <li class="nav-item">-->
                        <!--                        <a class="nav-link" href="#">-->
                        <!--                            Integrations-->
                        <!--                        </a>-->
                        <!--                    </li>-->
                    </ul>
                </div>
            </nav>



            <!--				Share  Export  This week-->
            <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
                <h2>
                    道路信息
                </h2>
                <p><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal2"
                           style="background-color: transparent;color: black">添加用户</button></p>
                <!--                <button style="border: none" class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown">-->
                <!--            </button>-->
                <!--            </h2>-->
                <!--            <ul class="dropdown-menu" style="width: 111px !important;min-width: 0rem !important" >-->
                <!--                <li><a data-toggle="modal" data-target="#myModal" href="#" style="height: 30px;line-height:30px; text-align: center;display: block;text-decoration: none">查看</a></li>-->
                <!--            </ul>-->

                <div class="table-responsive">
                    <table class="table table-sm">
                        <thead>
                        <tr>
                            <th>用户名</th>
                            <th>密码</th>
                            <th>角色</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr class="order" th:each="user:${users}">
                            <td>[[${user.username}]]</td>
                            <td>[[${user.password}]]</td>
                            <td>[[${user.role}]]</td>
                            <td>
                               <button type="button" class="btn btn-outline-success"
                               data-toggle="modal" data-target="#myModal"
                               th:onclick="updateUser([[${user.id}]],[[${user.username}]],[[${user.password}]],[[${user.role}]])">修改</button>
                                <button type="button" class="btn btn-outline-success"
                                        data-toggle="modal" data-target="#myModal1"
                                        th:onclick="updateUser1([[${user.id}]],[[${user.username}]],[[${user.password}]],[[${user.role}]])">删除</button>
<!--                                <a class="btn btn-outline-secondary" th:href="@{/uav/user/delete}">删除</a>-->
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <!--修改拟态框-->
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content" style="width: 533px;">
                            <div class="modal-header">
                                <h4 class="modal-title" id="myModalLabel">
                                    修改界面
                                </h4>
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                    &times;
                                </button>
                            </div>
                            <div class="modal-body">
                                <form action="/uav/user/manger/update">
                                    <input type="hidden" value="1" id="i" name="id">
                                    <div class="form-group">
                                        <label for="u" style="color: black!important;">用户名</label>
                                        <input value="jqx" id="u" name="username" class="form-control" placeholder="请输入用户名" aria-describedby="emailHelp" required="">
                                    </div>
                                    <div class="form-group">
                                        <label for="p" style="color: black!important;">密码</label>
                                        <input value="123456" id="p" name="password" class="form-control" placeholder="请输入密码" required="">
                                    </div>
                                    <div class="form-group">
                                        <label for="r" style="color: black!important;">角色</label>
                                        <input value="user" id="r" name="role" class="form-control" placeholder="请输入角色" required="">
                                    </div>
                                    <p><button type="submit" class="btn btn-primary Mybutton" data-toggle="modal" style="margin-left: 400px">确认修改</button></p>

                                </form>
                            </div>
                            <!--            <div class="modal-footer">-->
                            <!--            </div>-->
                        </div>
                    </div>
                </div>

                <!--删除拟态框-->
                <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content" style="width: 533px;">
                            <div class="modal-header">
                                <h4 class="modal-title" id="myModalLabel1">
                                    删除界面
                                </h4>
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                    &times;
                                </button>
                            </div>
                            <div class="modal-body">
                                <form action="/uav/user/manger/delete">
                                    <input type="hidden" value="1" id="i1" name="id">
                                    <div class="form-group">
                                        <label for="u" style="color: black!important;">用户名</label>
                                        <input disabled="disabled" value="jqx" id="u1" name="username" class="form-control" placeholder="请输入用户名" aria-describedby="emailHelp" required="">
                                    </div>
                                    <div class="form-group">
                                        <label for="p" style="color: black!important;">密码</label>
                                        <input disabled="disabled" value="123456" id="p1" name="password" class="form-control" placeholder="请输入密码" required="">
                                    </div>
                                    <div class="form-group">
                                        <label for="r" style="color: black!important;">角色</label>
                                        <input disabled="disabled" value="user" id="r1" name="role" class="form-control" placeholder="请输入角色" required="">
                                    </div>
                                    <p><button type="submit" class="btn btn-primary Mybutton" data-toggle="modal" style="margin-left: 400px">确认删除</button></p>

                                </form>
                            </div>
                            <!--            <div class="modal-footer">-->
                            <!--            </div>-->
                        </div>
                    </div>
                </div>
                <!--添加拟态框-->
                <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content" style="width: 533px;">
                            <div class="modal-header">
                                <h4 class="modal-title" id="myModalLabel2">
                                    添加用户
                                </h4>
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                    &times;
                                </button>
                            </div>
                            <div class="modal-body">
                                <form action="/uav/user/manger/add">
                                    <div class="form-group">
                                        <label for="exampleInputEmail1" style="color: black!important;">用户名</label>
                                        <input name="username" class="form-control" aria-describedby="emailHelp" required="">
                                    </div>
                                    <div class="form-group">
                                        <label for="exampleInputPassword1" style="color: black!important;">密码</label>
                                        <input name="password" type="password" class="form-control" placeholder="Password" required="">
                                    </div>
                                    <div class="form-group">
                                        <label for="exampleInputPassword1" style="color: black!important;">确认密码</label>
                                        <input name="Cpassword" type="password" class="form-control" placeholder="Confirm Password" required="">
                                    </div>
                                    <p><button type="submit" class="btn btn-primary Mybutton" data-toggle="modal" style="margin-left: 400px">确认注册</button></p>
                                </form>
                            </div>
                            <!--            <div class="modal-footer">-->
                            <!--            </div>-->
                        </div>
                    </div>
                </div>

                <nav aria-label="Page navigation example">


                    <ul class="pagination">
                        <div class="dropdown" style="margin-right: 30px;margin-top: 2px">
                            <!--                        <h2>道路信息</h2>-->
                            <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar">
                                    <rect x="3" y="4" width="18" height="18" rx="2" ry="2">
                                    </rect>
                                    <line x1="16" y1="2" x2="16" y2="6">
                                    </line>
                                    <line x1="8" y1="2" x2="8" y2="6">
                                    </line>
                                    <line x1="3" y1="10" x2="21" y2="10">
                                    </line>
                                </svg>

                            </button>
                            <!--                        </h2>-->
                            <ul class="dropdown-menu" style="width: 50px !important;min-width: 0rem !important" >
                                <!--                            <li>eee</li>-->
                                <li><a th:href="@{/uav/user/manger(limitPage=9)}" style="height: 30px;line-height:30px; text-align: center;display: block;text-decoration: none">10</a></li>
                                <li><a th:href="@{/uav/user/manger(limitPage=20)}" style="height: 30px;line-height:30px; text-align: center;display: block;text-decoration: none">20</a></li>
                                <li><a th:href="@{/uav/user/manger(limitPage=30)}" style="height: 30px;line-height:30px; text-align: center;display: block;text-decoration: none">30</a></li>
                                <li><a th:href="@{/uav/user/manger(limitPage=40)}" style="height: 30px;line-height:30px; text-align: center;display: block;text-decoration: none">40</a></li>

                            </ul>
                        </div>

                        <li class="page-item" onclick="handlePage(0)">
                            <a class="page-link" th:href="@{/uav/user/manger(nowPage=${nowPage}-1,limitPage=${limitPage})}"
                               aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <li class="page-item" onclick="handlePage(1)">
                            <a class="page-link" th:href="@{/uav/user/manger(nowPage=${nowPage},limitPage=${limitPage})}">1</a>
                        </li>
                        <li class="page-item" onclick="handlePage(2)">
                            <a class="page-link" th:href="@{/uav/user/manger(nowPage=${nowPage}+1,limitPage=${limitPage})}">2</a>
                        </li>
                        <li class="page-item" onclick="handlePage(3)">
                            <a class="page-link" th:href="@{/uav/user/manger(nowPage=${nowPage}+2,limitPage=${limitPage})}">3</a>
                        </li>
                        <li class="page-item" onclick="handlePage(4)">
                            <a class="page-link" th:href="@{/uav/user/manger(nowPage=${nowPage}+1,limitPage=${limitPage})}"
                               aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>

            </main>
            <!--		<a href="#"  onclick="handlePage(123)" >hhhhh </a>-->
        </div>
    </div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!--<script type="text/javascript" src="asserts/js/jquery-3.2.1.slim.min.js"></script>-->
<!--<script type="text/javascript" src="asserts/js/popper.min.js"></script>-->
<!--<script type="text/javascript" src="asserts/js/bootstrap.min.js"></script>-->

<!--&lt;!&ndash; Icons &ndash;&gt;-->
<!--<script type="text/javascript" src="asserts/js/feather.min.js"></script>-->
<!--<script>-->
<!--    feather.replace();-->
<!--</script>-->
<script type="text/javascript" charset="UTF-8" defer="defer">
    // location.reload()
    // function handlePage(item) {
    //     var length = document.getElementsByClassName("page-item").length;
    //     // alert(length)
    //     for (var i = 0; i < length; i++) {
    //        document.getElementsByClassName("page-item")[i].style.backgroundColor="page-item";
    //     }
    //     document.getElementsByClassName("page-item")[item].className="page-item active";
    //     // document.getElementsByClassName("page-link")[item].style.backgroundColor="yellow";
    //     // alert( document.getElementsByClassName("page-link")[item].style.backgroundColor);
    // }

    //     var item=[[${light}]]
    // document.getElementsByClassName("page-item")[item].className="page-item active";

    //(1).更新页数
    var page=[[${nowPage}+1]];

    // if(roadCrossing=="")roadCrossing=null;
    var limitPage=[[${limitPage+0}]]

    console.log(limitPage)
    if(page%3==1){
        document.getElementsByClassName("page-link")[1].textContent=page;
        document.getElementsByClassName("page-link")[1].href="/uav/user/manger?owPage="+(page-1)+"&limitPage="+limitPage;
        document.getElementsByClassName("page-link")[2].textContent=page+1;
        document.getElementsByClassName("page-link")[2].href="/uav/user/manger?owPage="+(page)+"&limitPage="+limitPage;
        document.getElementsByClassName("page-link")[3].textContent=page+2;
        document.getElementsByClassName("page-link")[3].href="/uav/user/manger?owPage="+(page+1)+"&limitPage="+limitPage;
    }
    else if(page%3==2){
        document.getElementsByClassName("page-link")[1].textContent=page-1;
        document.getElementsByClassName("page-link")[1].href="/uav/user/manger?owPage="+(page-2)+"&limitPage="+limitPage;
        document.getElementsByClassName("page-link")[2].textContent=page;
        document.getElementsByClassName("page-link")[2].href="/uav/user/manger?owPage="+(page-1)+"&limitPage="+limitPage;
        document.getElementsByClassName("page-link")[3].textContent=page+1;
        document.getElementsByClassName("page-link")[3].href="/uav/user/manger?owPage="+(page)+"&limitPage="+limitPage;

    }
    else{
        document.getElementsByClassName("page-link")[1].textContent=page-2;
        document.getElementsByClassName("page-link")[1].href="/uav/user/manger?owPage="+(page-3)+"&limitPageInt="+limitPage;
        document.getElementsByClassName("page-link")[2].textContent=page-1;
        document.getElementsByClassName("page-link")[2].href="/uav/user/manger?owPage="+(page-2)+"&limitPageInt="+limitPage;
        document.getElementsByClassName("page-link")[3].textContent=page;
        document.getElementsByClassName("page-link")[3].href="/uav/user/manger?owPage="+(page-1)+"&limitPageInt="+limitPage;
    }
    // (2).染色函数
    var item=[[${nowPage}+1]]
    // alert(item);
    var length = document.getElementsByClassName("page-item").length;
    // alert(length)
    for (var i = 0; i < length; i++) {
        // alert(document.getElementsByClassName("page-link")[i].textContent);
        if(document.getElementsByClassName("page-link")[i].textContent==item){
            document.getElementsByClassName("page-item")[i].className="page-item active";
            break;
        }
        // document.getElementsByClassName("page-item")[i].style.backgroundColor="page-item";
    }

    // document.getElementsByClassName("page-item")[i].style.backgroundColor="page-item";

    // setTimeout(function(){
    // (3).合并单元格

    var arr = [];
    var f1 = document.getElementsByClassName("f1");
    for (let i = 0; i < f1.length; i++) {

        if (arr.indexOf(f1[i].innerHTML) == -1) {
            arr.push(f1[i].innerHTML);
            var index = i; //index是第一个元素
            document.getElementsByClassName("f1")[i].style.borderBottom = 0 + "px";
        } else {
            document.getElementsByClassName("f1")[i].style.display = "none"; //隐藏重复的元素
            document.getElementsByClassName("f1")[index].rowSpan += 1; //删去重复的元素,就给第一个元素的rowspan+1
        }
    }

    var arr = [];
    var f2 = document.getElementsByClassName("f2");
    for (let i = 0; i < f2.length; i++) {

        if (arr.indexOf(f2[i].innerHTML) == -1) {
            arr.push(f2[i].innerHTML);
            var index = i; //index是第一个元素
            document.getElementsByClassName("f2")[i].style.borderBottom = 0 + "px";
        } else {
            document.getElementsByClassName("f2")[i].style.display = "none"; //隐藏重复的元素
            document.getElementsByClassName("f2")[index].rowSpan += 1; //删去重复的元素,就给第一个元素的rowspan+1
        }
    }

    var arr = [];
    var f3 = document.getElementsByClassName("f3");
    for (let i = 0; i < f1.length; i++) {

        if (arr.indexOf(f3[i].innerHTML) == -1) {
            arr.push(f3[i].innerHTML);
            var index = i; //index是第一个元素
            document.getElementsByClassName("f3")[i].style.borderBottom = 0 + "px";
        } else {
            document.getElementsByClassName("f3")[i].style.display = "none"; //隐藏重复的元素
            document.getElementsByClassName("f3")[index].rowSpan += 1; //删去重复的元素,就给第一个元素的rowspan+1
        }
    }

    //点亮左侧导航栏
    var n=document.getElementsByClassName("nav-link");
    var index=[[${id}+1]];
    console.log(index)
    document.getElementsByClassName("nav-link")[index].className="nav-link active";
    console.log(document.getElementsByClassName("nav-link")[index].className);

    //(4).解决闪烁
    var box=document.getElementsByClassName("box")[0];
    console.log(box.style.visibility);
    box.style.visibility="visible";

    //修改用户
    function updateUser(i,u,p,r){
        document.getElementById('i').value=i;
        document.getElementById('u').value=u;
        document.getElementById('p').value=p;
        document.getElementById('r').value=r;
        // alert(u+p+r);
    }
    //删除用户
    function updateUser1(i,u,p,r){
        document.getElementById('i1').value=i;
        document.getElementById('u1').value=u;
        document.getElementById('p1').value=p;
        document.getElementById('r1').value=r;
        // alert(u+p+r);
    }
</script>
<script type="text/javascript" th:src="@{/js/jquery-3.2.1.slim.min.js}" ></script>
<script type="text/javascript" th:src="@{/js/popper.min.js}" ></script>
<script type="text/javascript" th:src="@{/js/bootstrap.min.js}" ></script>

</body>

</html>
